<template>
    <div class="m-style">
        <m_block-index-nav-bar title="任务列表"/>
        <van-nav-bar
                :title="`你好，${userName}`"
                left-text="退出登录"
                left-arrow
                @click-left="out"
                :fixed="true"
                v-if="false"
        />
        <van-tabs color="deepskyblue" v-model="active">
            <van-tab v-for="(v,i) in names" :title="v">
                <list_item :type="types[i]"/>
            </van-tab>
        </van-tabs>
        <van-button icon="plus" class="btn-add" type="info" round @click="start"></van-button>
    </div>
</template>

<script>
    import List_item from "./list_item";
    import {mapGetters, mapMutations} from "vuex";
    import M_blockIndexNavBar from "./m_blockIndexNavBar";
    export default {
        name: "list",
        components: {M_blockIndexNavBar, List_item},
        data(){
            return {
                active: 0,
                names: ["待处理", "已处理", "已办结", "关注的"],
                types: ["todo", "processed", "over", "observe"]
            }
        },
        computed:{
            ...mapGetters(["userName"])
        },
        methods:{
            ...mapMutations(["logout"]),

            start(){
                this.$router.push("/create")
            },
            out(){
                this.logout()
                this.$router.replace("/login")
            }

        },
        mounted() {
            var tabname = this.$route.query.tab_name
            console.log(this.types.indexOf(tabname))
            this.active = Math.max(this.types.indexOf(tabname), 0)
            console.log(this.active)
        }
    }
</script>

<style scoped>
    .btn-add{
        position: fixed;
        right: 20px;
        bottom: 20px;
    }
</style>
